import 'package:flutter/material.dart';

class BottomBarStatefulWidget extends StatefulWidget {
  final List<Item> items; // 所有 StatefulWidget 的属性必须是final的
  // 声明选中回调
  final OnTabSelect? onTabSelect;

  BottomBarStatefulWidget({
    Key? key,
    // required关键词表示参数items在构造时是必须的。构造方法中this.items这种语法表示传入的实参直接赋值给成员items
    required this.items,
    this.onTabSelect, // 在构造方法中传入回调
  }) : super(key: key);

  @override
  _BottomBarStatefulWidgetState createState() => _BottomBarStatefulWidgetState();
}

// 将函数类型重命名，用于回调响应
typedef OnTabSelect = void Function(int value);

class _BottomBarStatefulWidgetState extends State<BottomBarStatefulWidget> {
  // 保存每个控件选中状态的 map
  var _selectMap = {};

  @override
  void initState() {
    super.initState();
    // 初始化可变状态
    for (var i = 0; i < widget.items.length; i++) {
      _selectMap[widget.items[i].name] = i == 0 ? true : false;
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        // State的子类可以通过widget方便地访问到绑定控件的实例，而items又是控件的成员变量
        for (var item in widget.items)
          // Flutter 中为控件增加点击事件是通过包一层GestureDetector实现的
          GestureDetector(
            onTap: () {
              // 调用了setState()就是告诉系统：该控件状态发生变化，系统将触发一次重绘，即调用build()方法
              setState(() {
                // 将所有按钮置为未选中
                for (var i = 0; i < widget.items.length; i++) {
                  _selectMap[widget.items[i].name] = false;
                }
                // 将点击按钮置为选中
                _selectMap[item.name] = true;
              });
              // 在点击事件响应逻辑中引用回调
              if (widget.onTabSelect != null) {
                // 将选中按钮的索引值传递出去
                widget.onTabSelect!(widget.items.indexOf(item));
              }
            },
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(item.icon, color: _selectMap[item.name] ? Colors.blue : Colors.grey),
                Text(
                  item.name,
                  style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w400,
                    color: _selectMap[item.name] ? Colors.blue : Colors.grey,
                  ),
                )
              ],
            ),
          )
      ],
    );
  }

  @override
  void didUpdateWidget(BottomBarStatefulWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
  }



  // 组件生命周期结束
  @override
  void dispose() {
    super.dispose();
    _selectMap.clear();
  }

  @override
  void reassemble() {
    super.reassemble();
  }

  @override
  void activate() {
    super.activate();
  }
}

class Item {
  String name = ""; // 按钮名称
  IconData? icon; // 按钮图标

  Item(this.name, this.icon); // 构造方法
}
